<template>
  <div class="vuexCeshi p-10">
    <div class="font44 text-bold">VUEX专题</div>
    <div class="text-bold font24 m-t-20">数量:{{ count }}</div>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="changeStateCount()">数量+1</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="changeStateCount(2)">数量+2</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="changeStateCount(-1)">数量-1</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="changeStateCount(-2)">数量-2</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="changeStateCountAsync(1)">一秒后+1</el-button>

    <div class="text-bold font24 m-t-20">
      <span class="">模块A 数量:1{{ moduleA_count }}</span>
      <span class="m-l-30">模块A 数量double:{{ moduleA_doubleCount }}</span>
    </div>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="moduleA_changeStateCount()">数量+1</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="moduleA_changeStateCount(-1)">数量-1</el-button>
    <el-button class="m-t-10 text-c" type="primary" size="small" @click="moduleA_changeStateCountAsync(-1)">一秒后-1
    </el-button>

    <div class="text-bold font24 m-t-10">
      <span class="">VUEX状态持久化</span>
      <!--      LocalStorage是存储在磁盘当中的,VUEX是存储在内存当周的。所以LocalStorage读取性能较差。-->
    </div>
    <div class="m-t-10 font12" style="color: red">token:{{ token }}</div>
    <div class="text-bold font24 m-t-10">
      <span class="">主题色</span>
    </div>
    <div class="m-t-10 font12" style="color: red">themeMedia:{{ themeMedia ? 'light' : 'dark' }}</div>

    <div class="m-t-20">
      <div class="font44 text-bold">Pinia专题</div>
      <div>personStore: {{ personStore.name }} <span class="m-lr-20">------</span> getter: {{ personStore.getCount }}</div>
      <div>studentStore: {{ studentStore.name }} <span class="m-lr-20">------</span> getter: {{ studentStore.getCount }}</div>
      <div>teacherStore: {{ teacherStore.name }} <span class="m-lr-20">------</span> getter: {{ teacherStore.getCount }}</div>
      <div class="m-t-5">
        <el-button type="info" @click="updateName">改名</el-button>
        <el-button type="info" @click="piniauUpdateCount(1)">人数加+1</el-button>
        <el-button type="info" @click="piniauUpdateCount(-1)">人数加-1</el-button>
      </div>
      <div class="text-bold font24 m-t-10">
        <span class="">Pinia状态持久化</span>
        <!--      LocalStorage是存储在磁盘当中的,VUEX是存储在内存当周的。所以LocalStorage读取性能较差。-->
      </div>
      <div class="m-t-10 font12" style="color: blue">{{ teacherStore.getCount }}</div>
    </div>

  </div>

</template>

<script lang="ts" setup>
import {computed, reactive, toRefs} from 'vue'
import {useStore} from "vuex";
import {usePersonStore, useStudentStore, useTeacherStore} from '@/store/piniaIdx.js';

let {state, commit, getters, dispatch} = useStore();
let count = computed(() => state.count)
let changeStateCount = (val?: Number) => {
  commit("changeCount", val || 1)
}
// 异步改变数量
let changeStateCountAsync = (val?: Number) => {
  dispatch("changeCountAsync", val || 1)
}
// 模块A==========================
let moduleA_count = computed(() => state.moduleA.count)
let moduleA_doubleCount = computed(() => getters['moduleA/doubleCount'])
let moduleA_changeStateCount = (val?: Number) => {
  commit("moduleA/changeCount", val || 1)
}
// 异步改变数量
let moduleA_changeStateCountAsync = (val?: Number) => {
  dispatch("moduleA/changeCountAsync", val || 1)
}
// VUEX状态持久化============
let token = computed(() => state.token)
let themeMedia = computed(() => state.themeMedia)

// Pinia==========================================
const personStore = usePersonStore();
const studentStore = useStudentStore();
const teacherStore = useTeacherStore();

function updateName() {
  personStore.updateName('人类-葫芦娃')
  studentStore.updateName('学生-小明')
  teacherStore.updateName('老师-漂老师')
}

let piniauUpdateCount =(val:any)=>{
  personStore.count += val
  studentStore.count += val
  teacherStore.count += val
}
</script>

<style lang="scss" scoped>
.vuexCeshi {
  height: 100%;
}
</style>